<template>
	<view>
		<!-- :height="scrollTop >= 200 ? 120 : 60" -->
		<u-navbarz :autoBack="false">
			<template #center>
				<view class="searchbtn" @click="gosearchStationCar">
					<view class="placeholder">{{$z.$t("查找电站")}}</view>
					<view class="iconfont icon-fangdajing"></view>
				</view>
			</template>
			<template #left>
				<view class="u-flex" style="font-weight: bold" @click="getwz">
					<text class="u-line-1" style="width: 100rpx; margin-right: 8rpx">
						{{ city }}
					</text>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</template>
			<template #right>
				<view class="kefu iconfont icon-rengongkefu" @click="kftap()"></view>
			</template>
			<template v-if="scrollTop >= 200">
				<view class="u-flex typebtnbox">
					<u-button type="primary" :customStyle="{ ...customstyle, margin: `0rpx 34rpx` }"
						:text="searchbtntext" @click="kmcshow = true"></u-button>
					<u-button :customStyle="{ ...customstyle, margin: `0rpx` }" text="筛选" @click="ptbtntap"></u-button>
				</view>
			</template>
		</u-navbarz>
		<view class="content">
			<!-- <bgcolor></bgcolor> -->
			<scroll-view class="scroll-view_H" :scroll-y="true" @scroll="scroll" :scrollTop="scrollTop"
				@scrolltolower="scrolltolower" :scroll-with-animation="true">
				<!-- @click="click" -->
				<u--image :showLoading="true" :src="src" width="686rpx" height="272rpx" mode="widthFix"
					style="margin: 0 32rpx" radius="20rpx"></u--image>
				<view class="u-flex typebtnbox">
					<u-button type="primary" :customStyle="{ ...customstyle, margin: `0rpx 34rpx` }"
						:text="searchbtntext" @click="kmcshow = true"></u-button>
					<u-button :customStyle="{ ...customstyle, margin: `0rpx` }" text="筛选" @click="ptbtntap"></u-button>
				</view>
				<view v-for="(item, index) in showlist" :key="index" style="padding: 10rpx 32rpx">
					<caritem :item="item"></caritem>
				</view>
				<u-loadmore :status="status" loadingIcon="circle" />

				<u-back-top :scroll-top="scrollTop" @click="scrollTop = 0"></u-back-top>
				<view class="" style="height: 30rpx;">
				</view>
			</scroll-view>

			<u-action-sheet :actions="kmclist" :show="kmcshow" cancelText="重置" @select="kmcselect"
				@close="kmcclose"></u-action-sheet>
			<ptxs @save="ptsave" ref="pt"></ptxs>
			<zmodal ref="zmodal"></zmodal>
		</view>
		<ztabbar></ztabbar>
	</view>

</template>

<script>
	import pt from "./components/pt.vue";
	import cityjs from "@/pages/city/cityjs.js";
	import src from "@/static/banner.png";

	export default {
		components: {
			ptxs: pt,
		},
		data() {
			return {
				src,
				kmclist: [{
						name: this.$z.$t("快充"),
						value: "carzlsum",
					},
					{
						name: this.$z.$t("慢充"),
						value: "carjlsum",
					},
				],
				kmcshow: false,
				searchdata: {
					kmc: "",
					pt: [],
				},
				status: "",
				bgColor: `rgba(0,0,0,0)`,
				loading: true,
				customstyle: {
					width: `auto`,
					borderRadius: "20rpx",
					fontWeight: "bold",
					padding: "0 40rpx",
				},
				scrollTop: 0,
				list: [],
				wzlist: [],
				wz: {},
			};
		},

		onLoad() {
			this.init();
		},
		computed: {
			city() {
				if (this.$store.state.config.city.label) {
					return this.$store.state.config.city.label;
				}
				if (this.wzlist.length == 0) {
					return "";
				}
				let cityjsxs = cityjs.flat();
				let r = cityjsxs.find((e) => {
					return e.value == this.wzlist[0].AreaCode;
				});

				return r ? r.label : "";
			},
			showlist() {
				let r = this.list.filter(e => {
					return e.AreaCode == this.list[0].AreaCode
				})
				return r
			},
			searchbtntext() {
				if (this.searchdata.kmc == "") {
					return this.$z.$t("快慢充");
				}
				let r = this.kmclist.find((e) => {
					return e.value == this.searchdata.kmc;
				});
				return r?.name;
			},
			reqsearchdata() {
				let r = {};
				if (this.$store.state.config.city.value) {
					r.AreaCode = this.$store.state.config.city.value;
				}
				// else {
				// 	let wz = this.$store.state.config.wz;
				// 	r.pt = `POINT(${wz.lng},${wz.lat})`;
				// }
				let wz = this.$store.state.config.wz;
				r.pt = `POINT(${wz.lng},${wz.lat})`;

				r.csta = this.list.length;
				r.cmax = "20";
				if (!(this.searchdata.kmc == "" && this.searchdata.pt.length == 0)) {
					r.cmax = "100";
				}
				return r;
			},
		},
		methods: {
			kftap() {
				this.$refs.zmodal.init({
					showcancel: true,
					confirmText: "拨打",
					content: `${this.$z.$t("拨打客服电话")}${this.$store.state.config.kfutel},${this.$z.$t("工作时间为")}8:30--22:00，${this.$z.$t("其他时间会转留言")}.`,
					confirm: () => {
						uni.makePhoneCall({
							phoneNumber: this.$store.state.config.kfuteltest //仅为示例
						});
					}
				})
			},
			gosearchStationCar() {
				uni.navigateTo({
					url: "/pages/searchStationCar/searchStationCar",
				});
			},
			async ptsave(list) {
				this.searchdata.pt = list;
				this.list = [];
				this.status = "";
				await this.getdata();
			},
			ptbtntap() {
				this.$refs.pt.show();
			},
			async kmcselect(e) {
				this.searchdata.kmc = e.value;
				this.kmcshow = false;

				this.list = [];
				this.status = "";
				await this.getdata();
			},
			async kmcclose() {
				this.searchdata.kmc = "";
				this.kmcshow = false;

				this.list = [];
				this.status = "";
				await this.getdata();
			},
			// btntap() {
			// 	this.$z.Geocoder({
			// 		lat: 30.346398997089644,
			// 		lng: 120.12302981536222,
			// 	});
			// },
			getwz() {
				uni.navigateTo({
					url: "/pages/city/city",
				});
			},
			scrolltolower() {
				this.getdata();
			},
			righttap() {},
			async init() {

				this.list = [];
				this.status = "";

				if (Object.keys(this.$store.state.config.wz).length == 0) {
					this.status = "loading";
					await this.$store.dispatch("config/getLocation");
					this.status = "";
				}
				await this.getdata();
			},
			async wzinit() {
				this.list = [];
				this.status = "";

				if (Object.keys(this.$store.state.config.wz).length == 0) {
					this.status = "loading";
					await this.$store.dispatch("config/getLocation");
					this.status = "";
				}

				await this.getdata();
			},
			async getdata() {
				if (this.status == "loading" || this.status == "nomore") {
					return;
				}
				this.status = "loading";
				// this.searchdata.kmc = e.value;
				let list = await this.$z.request("/StationCar", this.reqsearchdata);
				if (this.wzlist.length == 0) {
					this.wzlist = list;
				}
				// console.log(list, "list");
				// AreaCode
				if (!this.$store.state.config.city.value && list[1]?.AreaCode) {
					this.status = "";
					await this.$store.dispatch("config/setCityfn", list[1].AreaCode)
					this.getdata()
					return
				}

				let xslist = list.filter((e) => {
					if (this.searchdata.kmc != "" && e[this.searchdata.kmc] == 0) {
						return false;
					}
					if (this.searchdata.pt.length == 0) {
						return true;
					}
					let par1 = String(e.par1).split(",").filter((e) => {
						return e != "";
					});
					let par2 = this.searchdata.pt;
					// 判断par1中全部包含par2
					return par2.every((e) => {
						return par1.includes(e);
					});
				});
				// console.log(list, await this.$z.request("/StationCar", this.reqsearchdata), "this.searchdata.kmc");
				this.list = this.list.concat(xslist);
				this.status =
					list.length < this.reqsearchdata.cmax ? "nomore" : "loadmore";
			},
			scroll(event) {
				let {
					scrollLeft,
					scrollTop,
					scrollHeight,
					scrollWidth,
					deltaX,
					deltaY,
				} = event.detail;

				this.scrollTop = scrollTop;
			},
		},
	};
</script>

<style lang="scss">
	.typebtnbox {
		padding: 20rpx 0;
	}

	.typebtnboxfixed {
		position: fixed;
	}

	.aaaa {
		background: linear-gradient(to right, #94fafc, #d6fde8, #ccebff);
		background-size: 200% 200%;
		animation: gradient 5s ease infinite;
	}

	.scroll-view_H {
		height: 100vh;
		// background-image: url("@/static/index/bg.png");
		// background-size: 100% 100%;
		background: linear-gradient(to right, #94fafc, #d6fde8, #ccebff);
		background-size: 200% 200%;
		animation: gradient 5s ease infinite;
	}

	@keyframes gradient {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	.kefu {
		width: 80rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 16rpx;
		color: $u-primary;
		font-size: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.searchbtn {
		width: 400rpx;
		background-color: #fff;
		height: 80rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.iconfont {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: $u-primary;
			font-size: 40rpx;
		}

		.placeholder {
			font-size: 28rpx;
			color: $uni-text-color-placeholder;
			padding-left: 20rpx;
		}
	}
</style>